import type { EmployeeBase, PaginationType } from "@/types"
import { computed, reactive, ref } from "vue"

export default function usePageState() {
  // 响应式数据
  const loading = ref<boolean>(false)
  const submitLoading = ref<boolean>(false)
  const dialogVisible = ref<boolean>(false)
  const isEdit = ref(false)
  const formRef = ref() //ElementPlusForm实例Ref引用;

  const selectedRows = ref<Partial<EmployeeBase>[]>([])

  // 搜索表单
  const searchForm = reactive({
    name: '',
    email: '',
    department: '',
    position: '',
    status: ''
  })

  // 分页数据
  const pagination = reactive<PaginationType>({
    current: 1,
    size: 10,
    total: 0
  })

  // 表格数据
  const tableData = ref<EmployeeBase[]>([
    {
      id: 1,
      employeeId: 'EMP001',
      name: '张小强',
      email: 'zhangxiaoqiang@company.com',
      phone: '13800138001',
      avatar: '',
      department: '技术部',
      position: 'Java开发工程师',
      joinDate: '2023-03-15',
      supervisor: '李小红',
      status: 'active',
      remark: '技术能力强，工作积极'
    },
    {
      id: 2,
      employeeId: 'EMP002',
      name: '刘小美',
      email: 'liuxiaomei@company.com',
      phone: '13800138002',
      avatar: '',
      department: '产品部',
      position: '产品经理',
      joinDate: '2023-05-20',
      supervisor: '王小明',
      status: 'active',
      remark: '产品思维清晰'
    },
    {
      id: 3,
      employeeId: 'EMP003',
      name: '陈小华',
      email: 'chenxiaohua@company.com',
      phone: '13800138003',
      avatar: '',
      department: '技术部',
      position: '前端开发工程师',
      joinDate: '2022-08-10',
      supervisor: '李小红',
      status: 'inactive',
      remark: '已离职'
    }
  ])

  // 表单数据
  const formData = reactive({
    id: null,
    employeeId: '',
    name: '',
    email: '',
    phone: '',
    department: '',
    position: '',
    joinDate: '',
    supervisor: '',
    avatar: '',
    remark: ''
  })

  // 表单验证规则
  const formRules = {
    name: [
      { required: true, message: '请输入员工姓名', trigger: 'blur' },
      { min: 2, max: 50, message: '姓名长度在2到50个字符', trigger: 'blur' }
    ],
    employeeId: [
      { required: true, message: '请输入工号', trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    phone: [
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    department: [
      { required: true, message: '请选择部门', trigger: 'change' }
    ],
    position: [
      { required: true, message: '请输入职位', trigger: 'blur' }
    ],
    joinDate: [
      { required: true, message: '请选择入职时间', trigger: 'change' }
    ]
  }

  // 计算属性
  const dialogTitle = computed(() => isEdit.value ? '编辑员工' : '添加员工')
  return {
    loading,
    submitLoading,
    dialogVisible,
    isEdit,
    formRef,
    selectedRows,
    searchForm,
    pagination,
    tableData,
    formData,
    formRules,
    dialogTitle
  }
}
